<template>
  <div class="config-panel">
    <h4>{{ title }}</h4>
    <el-form label-position="top" v-if="config && config.data && config.data[0]">
      <el-form-item label="是否启用">
        <el-switch v-model="config.enabled"></el-switch>
      </el-form-item>
      <div v-if="config.enabled">
        <el-form-item label="广告图片"><image-upload v-model="config.data[0].image" /></el-form-item>
        <!-- 关键修复：将 v-model 绑定到 link 对象内部的 path 属性 -->
        <el-form-item label="跳转链接"><el-input v-model="config.data[0].link.path" placeholder="请输入页面路径" /></el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script>
  import ImageUpload from '@/components/ImageUpload';
  export default {
    name: "UserBannerConfig",
    components: {
      ImageUpload
    },
    props: ['value', 'title'],
    computed: {
      config: {
        get() {
          const configValue = this.value || {};
          if (configValue.enabled === undefined) this.$set(configValue, 'enabled', true);
          if (!configValue.data || !Array.isArray(configValue.data) || configValue.data.length === 0) {
            // 确保data是一个包含一个对象的数组
            this.$set(configValue, 'data', [{
              image: '',
              link: {
                path: ''
              }
            }]);
          } else if (!configValue.data[0].link || typeof configValue.data[0].link !== 'object') {
            // 确保link是一个对象
            this.$set(configValue.data[0], 'link', {
              path: ''
            });
          }
          return configValue;
        },
        set(newValue) {
          this.$emit('input', newValue);
        }
      }
    }
  }
</script>

<style scoped>
  .config-panel {
    border: 1px solid #f0f0f0;
    padding: 15px;
    border-radius: 4px;
    margin-bottom: 20px;
  }

  h4 {
    margin-top: 0;
  }
</style>
